<template>
  <div>
    <el-button class="el-button" type="danger" @click="delBatch">批量删除</el-button>
    <el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" ref="elTree"
             show-checkbox node-key="catId" :default-expanded-keys="openIds" :draggable = "draggable" allow-drop="allowDrop">
    <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            v-if="node.level<=2"
            @click="() => append(node)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            v-if="node.childNodes.length==0"
            @click="() => remove(node, data)">
            Delete
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => update(data)">
            edit
          </el-button>
        </span>
      </span>
    </el-tree>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
      <el-form :model="category">
        <el-form-item label="请输入分类名称">
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="category.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计量单位">
          <el-input v-model="category.productUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        menus: [],
        dialogVisible: false,
        openIds: [],
        title: '',
        draggable: false,
        // 0代表add  1代表update
        isAddOrUpdate: 0,
        category: {
          'catId': null,
          'name': '',
          'parentCid': 0,
          'catLevel': 0,
          'showStatus': 1,
          'sort': 0,
          'icon': '',
          'productUnit': ''
        },
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
    },
    methods: {
      append (data) {
        this.isAddOrUpdate = 0
        this.dialogVisible = true
        this.category.parentCid = data.data.catId
        this.category.catLevel = data.data.catLevel * 1 + 1
        this.title = '添加分类'
        console.log('append', data)
      },
      delBatch () {
        console.log(this.$refs.elTree.getCheckedKeys())
        let catIds = this.$refs.elTree.getCheckedKeys()
        if (catIds) {
          this.$confirm(`确认删除【${catIds}】吗, 是否继续?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl('/product/category/deleteMenus'),
              method: 'post',
              data: this.$http.adornData(catIds, false)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.getMenus()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        }
      },
      update (data) {
        console.log('update', data)
        this.isAddOrUpdate = 1
        this.dialogVisible = true
        this.category.parentCid = data.parentCid
        this.category.catId = data.catId
        this.category.name = data.name
        this.category.catLevel = data.catLevel
        this.category.icon = data.icon
        this.title = '编辑分类'
      },
      remove (node, data) {
        console.log('remove', data)
        let ids = [data.catId]
        this.$confirm(`确认删除【${data.name}】吗, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/product/category/deleteMenus'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getMenus()
                  this.openIds = [node.parent.data.catId]
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      addCategory () {
        if (this.isAddOrUpdate === 0) {
          this.$http({
            url: this.$http.adornUrl('/product/category/save'),
            method: 'post',
            data: this.$http.adornData(this.category, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dialogVisible = false
              this.$message({
                message: '添加目录成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getMenus()
                  this.openIds = [this.category.parentCid]
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        } else {
          const {catId, name, icon, productUnit} = this.category
          this.$http({
            url: this.$http.adornUrl('/product/category/update'),
            method: 'post',
            data: this.$http.adornData({catId, name, icon, productUnit}, false)
          }).then(({data}) => {
            console.log('更新:', data)
            if (data && data.code === 0) {
              this.dialogVisible = false
              this.$message({
                message: '更新目录成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getMenus()
                  this.openIds = [this.category.catId]
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      },
      getMenus () {
        this.$http({
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'get'
        }).then(({data}) => {
          console.log('成功接收:', data.data)
          if (data.data) {
            this.menus = data.data
          }
        })
      },
      allowDrop (draggingNode, dropNode, type) {
        // 判断当前节点以及所在的父节点总层数不能大于3
        console.log(draggingNode,dropNode,type)
        return false
      }
    },
    created () {
      this.getMenus()
    }
  }
</script>
